<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 目录管理 -->
        <!-- 头部搜索 -->
   <el-row :gutter="20" type="flex" justify="space-between">
       <!-- 左侧查询-->
       <el-col :span="5">
      <div class="grid-content bg-purple">
      <el-form ref="form" :model="data" label-width="80px">
        <el-form-item label="目录名称">
        <el-input v-model="data.directoryName"></el-input>
         </el-form-item>

          </el-form>
         </div>
       </el-col>
   <el-col :span="13">
      <div class="grid-content bg-purple">
      <el-form ref="form" :model="dataform" label-width="80px" :inline="true">
        <el-form-item label="状态">
         <el-select v-model="dataform.state" placeholder="请选择" style="width: 100%;">
     <el-option
      v-for="item in options"
      :key="item.label"
      :label="item.label"
      :value="item.value">
    </el-option>
    </el-select>
         </el-form-item>
           <el-form-item>
       <el-button @click="offsearch">清除</el-button>
      <el-button type="primary" @click="seachdierctory">搜索</el-button>
  </el-form-item>
      </el-form>
      </div>
      </el-col>
      <!-- 右侧新增目录 -->
    <el-col :span="6">
      <div class="grid-content bg-purple">
           <el-button type="text"  icon="el-icon-back" v-if="this.$route.query.id!==undefined" @click="btnpush">返回学科</el-button>
          <el-button type="success" icon="el-icon-edit" @click="adddirectorys">新增目录</el-button>
      </div>
      </el-col>
    </el-row>
    <!-- 警告栏 -->
     <el-alert
    type="info"
    show-icon
     :closable="false">
     <template slot="title">
<span>
    数据一共{{counts}}条
</span>
    </template>
  </el-alert>

  <!-- 目录表格 -->
       <el-table
      :data="directorysform"
      style="width: 100%">
      <el-table-column
       type="index"
        label="序号"
        width="80">
      </el-table-column>
      <el-table-column
        prop="subjectName"
        label="所属学科"
       >
      </el-table-column>
      <el-table-column
        prop="directoryName"
        label="目录名称">
      </el-table-column>
       <el-table-column
        prop="username"
        label="创建者">
      </el-table-column>
       <el-table-column
        prop="addDate"
        label="创建日期">
      </el-table-column>
       <el-table-column
        prop="totals"
        label="面试题数量">
      </el-table-column>
       <el-table-column
        prop="state"
        label="状态">
      </el-table-column>

       <!-- 操作 -->
        <el-table-column label="操作" width="250px">
      <template slot-scope="scope">

       <el-button @click="isdisableRow (scope.row)" type="text" size="small">{{scope.row.state==='禁用'?'启用':'禁用'}}</el-button>
       <el-button @click="updateRow(scope.row)" type="text" size="small" :disabled="!scope.row.isdisable">修改</el-button>
       <el-button @click="deleteRow(scope.row)" type="text" size="small" disabled>删除</el-button>

      </template>
    </el-table-column>
    </el-table>

    <!-- 分页器 -->
     <el-row type="flex" justify="end" >
    <el-pagination
   background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"

      :page-sizes="[5, 10, 20, 50]"
      :page-size="data.pagesize"
      :current-page="data.page"

       layout=" prev, pager, next, sizes, jumper"
      :total="counts">
    </el-pagination>
</el-row>
<!-- 新增/修改目录-->
<el-dialog :title="isupdate?'修改目录':'新增目录'" :visible.sync="dialogVisible" v-if="dialogVisible" >

 <el-form ref="adddirectorysform" :model="adddirectorysform" label-width="80px" size="mini" :rules="adddirectorysrules" >
  <!-- 所属学科 -->
  <el-form-item label="所属学科" prop="subjectName" >
     <el-select v-model="adddirectorysform.subjectName" placeholder="请选择" style="width: 100%;" @change="changeselect(adddirectorysform.subjectName)">
       <el-option
        v-for="item in subjects"
        :key="item.id"
       :label="item.subjectName"
       :value="item.id">
    </el-option>
    </el-select>
  </el-form-item>
  <!-- 目录名称 -->
   <el-form-item label="目录名称" prop="directoryName">
    <el-input v-model="adddirectorysform.directoryName" ></el-input>
  </el-form-item>
    <el-form-item>
    <el-button @click="cancleadd">取消</el-button>
    <el-button type="primary" @click="addsure">确认</el-button>

  </el-form-item>
  </el-form>
</el-dialog>
      </el-card>
    </div>
  </div>
</template>

<script>

import { list as getCompanys } from '@/api/hmmm/companys'
import { list as getQuestion } from '@/api/hmmm/questions'
import { list as getDirectorys, detail, update, add, changeState, remove } from '@/api/hmmm/directorys'
// 状态枚举数据
import { status } from '@/api/hmmm/constants'
import { crtTimeFtt } from '@/filters'
// import { mapState } from 'vuex'
import { mapActions } from 'vuex'

export default {
  created () {
    // 获取所有目录的列表
    this.getDirectorys()
    getCompanys()
    getQuestion()
    // 获取所有学科
    this.getsubjectlist()
    // console.log(this.$route.query)
    // 获取所有目录
    this.getcataloglist()
  },
  data () {
    return {

      // 目录表格数据
      directorysform: [{
        id: '', // 编号
        subjectName: 'q', // 学科名称
        directoryName: '1', // 目录名称
        creator: 'l', // 创建者
        addDate: '1', // 创建日期,
        totals: 10, // 面试题数量
        state: '', // 状态
        username: '', // 创建者
        // 是不是禁用状态
        isdisable: false
      }],
      data: {
        pagesize: 10, // 当前页面大小
        page: 1, // 当前页码
        // 学科跳转数据
        subjectID: null
      },
      dataform: {
        state: '', // 状态
        directoryName: ''// 目录名称
      },
      options: [{
        value: 0,
        label: '禁用'
      }, {
        value: 1,
        label: '启用'
      }],
      btnshow: true,
      counts: 20, // 数据总数
      dialogVisible: false, // 控制添加目录弹框

      // 选中项
      value: '',
      // 是修改还是新填目录
      isupdate: false,
      // 获取所有的学科目录
      subjects: this.$store.state.subjectlist.subjectData,
      //   新增/修改目录表单
      adddirectorysform: {
        directoryName: '',
        subjectName: '',
        // 目录id
        id: '',
        // 学科id
        subjectID: '',
        state: 0
      },
      adddirectorysrules: {
        subjectName: [{ required: true, message: '请选择学科名称', trigger: 'change' }],
        directoryName: [{ required: true, message: '请输入目录名称', trigger: 'blur' }]
      }

    }
  },

  methods: {
    // 点击后跳转到学科
    btnpush () {
      this.$router.push('/subjects/list')
    },
    ...mapActions('subjectlist', ['getsubjectlist', 'getcataloglist']),
    // 点击搜索目录
    seachdierctory () {
      // 获取指定目录列表
      this.searchDirectorys()
    },
    // 点击清除
    offsearch () {
      this.dataform.state = ''
      this.dataform.directoryName = ''
      // 获取所目录列表
      this.getDirectorys()
    },
    // 查找指定目录列表
    async searchDirectorys () {
      const res = await getDirectorys(this.dataform)
      res.data.items.forEach(obj => {
        return status.forEach(item => {
          if (item.value === obj.state) { obj.state = item.label }
        })
      })
      // 格式化时间
      res.data.items.forEach(obj => { obj.addDate = crtTimeFtt(obj.addDate) })

      this.directorysform = res.data.items
      this.counts = res.data.counts
      this.directorysform.forEach(obj => {
        if (obj.state === '禁用') {
          // 禁用状态是false
          obj.isdisable = false
        } else {
          // 启用状态是true
          obj.isdisable = true
        }
      })
    },
    // 下拉框发生改变
    changeselect (selectid) {
      this.adddirectorysform.subjectID = selectid
    //   console.log(selectid)
    },
    // 获取当前目录列表
    async getDirectorys () {
      if (this.$route.query.id !== null) {
        // console.log(3)
        // 跳转后进行数据查找
        console.log(this.$route.query.id)
        this.data.subjectID = this.$route.query.id
      } else {
        // console.log(4)
        this.data.subjectID = null
      }
      const res = await getDirectorys(this.data)
      this.$route.query.id = null
      //   console.log(res)
      // 将状态枚举
      res.data.items.forEach(obj => {
        return status.forEach(item => {
          if (item.value === obj.state) { obj.state = item.label }
        })
      })
      // 格式化时间
      res.data.items.forEach(obj => { obj.addDate = crtTimeFtt(obj.addDate) })

      this.directorysform = res.data.items
      this.counts = res.data.counts
      this.directorysform.forEach(obj => {
        if (obj.state === '禁用') {
          // 禁用状态是false
          obj.isdisable = false
        } else {
          // 启用状态是true
          obj.isdisable = true
        }
      })
    },
    // 已禁用: 启用和修改可点
    // 已启用:禁用可点
    // 点禁用或者启用
    async isdisableRow (row) {
      // 改变修改按钮的状态
      row.isdisable = !row.isdisable
      // 改变state
      row.state = row.state === '禁用' ? '启用' : '禁用'
      this.adddirectorysform.state = row.state === '禁用' ? 0 : 1
      this.adddirectorysform.id = row.id
      const res = await changeState(this.adddirectorysform)
      console.log(res)
      this.$message.success('操作成功')
      // 重置数据
      this.reserData()
    },

    // 修改
    async updateRow (row) {
      // 点击修改,弹框展示,数据回填
      this.isupdate = true
      this.dialogVisible = true
      const res = await detail(row)
      this.adddirectorysform = res.data
      //   console.log(this.adddirectorysform)
      //   console.log(this.subjects)
      // 后台传回来的是学科id,但是现实到页码的话是名字
      // 下拉框数据回填不对

      this.subjects.forEach(obj => {
        if (obj.id === this.adddirectorysform.subjectID) {
          this.adddirectorysform.subjectName = obj.subjectName
        }
      })
    },
    // 删除
    async deleteRow (row) {
      const res = await remove(row)
      console.log(res)
    },
    // 页码大小发生变动
    handleSizeChange (newsize) {
      this.data.pagesize = newsize
      // 获取所有目录的列表
      this.getDirectorys()
    },
    // 当前页发生变动
    handleCurrentChange (newpage) {
      this.data.page = newpage
      // 获取所有目录的列表
      this.getDirectorys()
    },
    // 点击添加目录
    adddirectorys () {
      this.dialogVisible = true
      this.isupdate = false
    },
    // 确定添加目录
    addsure () {
      // 兜底验证 清空表单数据 重置校验
      // 兜底验证
      this.$refs.adddirectorysform.validate(async (valid) => {
        if (!valid) return
        if (this.isupdate) {
          // 添加修改
          await update(this.adddirectorysform)
          this.$message.success('修改成功')
        } else {
          console.log(1)
          await add(this.adddirectorysform)
          this.$message.success('新增目录成功')
        }
        // 关闭,重置
        this.cancleadd()
        // 获取所有目录的列表
        this.getDirectorys()
      })
    },
    // 点击取消添加目录
    cancleadd () {
      // 重置数据
      this.reserData()
      // 重置表单
      this.$refs.adddirectorysform.resetFields()

      // 关闭弹框
      this.dialogVisible = false
    },
    // 重置数据
    reserData () {
      // 重置数据
      this.adddirectorysform = {
        directoryName: '',
        subjectName: '',
        // 目录id
        id: '',
        // 学科id
        subjectID: '',
        state: 0

      }
    }

  },

  //   beforeRouteEnter (to, from, next) {
  //     next(vm => {
  //       if (to.fullPath === '/subjects/directorys') {
  //         this.getDirectorys()
  //       }
  //     })
  //   }
  beforeRouteUpdate (to, from, next) {
    this.data.subjectID = null
    this.getDirectorys()
    next()
  }

}

</script>

<style scoped></style>
